<script setup lang="ts">
import { requiredCheck } from "@/utils/verify";
import { ref } from "vue";
import { ifaceList, ifaceLinkUpdate } from "@/api/modules/dynamic-camouflage/line-config";

interface Props {
  title?: string;
  rowData?: Object;
  total?: number;
}

const props = withDefaults(defineProps<Props>(), {
  title: "新增线路",
  rowData: undefined,
  total: 0
});
defineOptions({
  name: "UpdateForm" // 默认策略
});
import useUpdate from "@/hooks/useUpdate";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";
import { ElMessage } from "element-plus";

const emits = defineEmits(["success"]);
const { updateFormData, updateFormRef, updateFormRules, submit, showHandle, openHandle, closeHandle } = useUpdate({
  rules: {
    lan: [...requiredCheck("请选择网口")],
    wan: [...requiredCheck("请选择网口")]
  },
  defaultData: {
    mode: 1,
    LAN: "",
    WAN: ""
  }
});
const ifaces = ref([]);

async function getIface() {
  try {
    const res = await ifaceAll();
    console.log(res);
    if (res) {
      ifaces.value = Object.values(res);
      console.log(ifaces.value);
    }
    Object.values(res);
  } catch (error) {}
}

// 空闲列表
const idleList = ref([]);

async function getLinksList() {
  const res = await ifaceList();
  console.log(res);
  if (res.idle && res.idle?.length) {
    let arr = res.idle[0].lan;
    idleList.value = arr.split("-");
  } else {
    idleList.value = [];
  }
}

async function submitCb() {
  await updateFormRef.value.validate();
  if (props.rowData?.id) {
    await ifaceLinkUpdate({
      action: "update",
      type: String(updateFormData.mode),
      link: props.rowData.linkid,
      lan: updateFormData.lan,
      wan: updateFormData.wan
    });
  } else {
    await ifaceLinkUpdate({
      action: "add",
      type: String(updateFormData.mode),
      link: Number(props.total) + 1,
      lan: updateFormData.lan,
      wan: updateFormData.wan || undefined
    });
  }
  ElMessage.success("更新成功");
  emits("success");
  showHandle.value = false;
}

async function openHandleCb() {
  await getLinksList();
  if (!idleList.value?.length && !props.rowData?.id) {
    ElMessage.warning("暂无空闲网口");
    return;
  }
  openHandle({
    row: {
      ...props.rowData
    },
    id: props.rowData?.id
  });

  await getIface();
  if (props.rowData?.id) {
    updateFormData.lan = getLanText(props.rowData.ifname);
    updateFormData.wan = getWanText(props.rowData.ifname) ? getWanText(props.rowData.ifname) : undefined;
    updateFormData.mode = modeMap.get(props.rowData.linkmode);
  }
}

function modeChange(type) {
  updateFormData.lan = "";
  updateFormData.wan = "";
}

function getLanText(data) {
  console.log(data);
  if (!data) {
    return "";
  }
  let text = "";
  if (data.includes("-")) {
    let arr = data.split("-");
    let arrOne = arr[0];
    arrOne = arrOne.split(":");
    text = arrOne[1];
  } else {
    let arrOne = data.split(":");
    text = arrOne[1];
  }
  return text;
}

function getWanText(data) {
  console.log(data);
  if (!data) {
    return "";
  }
  let arr = data.split("-");
  let text = arr[1];
  return text;
}

function getLanMacText(data) {
  console.log(data);
  if (!data) {
    return "";
  }
  let text = data;
  if (data.includes("-")) {
    let arr = data.split("-");
    text = arr[0];
  }
  return text;
}

function getWanMacText(data) {
  console.log(data);
  if (!data) {
    return "";
  }
  let text = data;
  if (data.includes("-")) {
    let arr = data.split("-");
    text = arr[1];
  }
  return text;
}

const modeMap = new Map([
  ["旁路模式", 1],
  ["串联模式", 2],
  ["动态网络", 3]
]);
const modeTextMap = new Map([
  ["旁路模式", "旁路"],
  ["串联模式", "串联直通"],
  ["动态网络", "串联网关"]
]);
</script>

<template>
  <div class="update-form mg-r-sm" style="display: inline-block" @click="openHandleCb">
    <slot>
      <el-button type="primary">新增</el-button>
    </slot>
  </div>
  <base-dialog @confirm="submitCb()" width="380px" :title="title" v-model="showHandle">
    <div class="details">
      <div class="details-main">
        <el-form ref="updateFormRef" :model="updateFormData" :rules="updateFormRules" label-width="90px" label-suffix="：">
          <el-form-item label="模式" prop="mode">
            <el-select @change="modeChange" style="width: 220px" v-model="updateFormData.mode" placeholder="请选择模式">
              <el-option label="旁路" :value="1" />
              <el-option label="串联网关" :value="3" />
              <el-option label="串联直通" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item :label="updateFormData.mode==1?`旁路口`:`LAN`" prop="lan">
            <el-select style="width: 220px" v-model="updateFormData.lan" placeholder="请选择网口">
              <el-option
                :disabled="updateFormData.lan === item || updateFormData.wan === item"
                v-for="item in updateFormData?.id ? ifaces : idleList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="updateFormData.mode === 2 || updateFormData.mode === 3" label="WAN" prop="wan">
            <el-select style="width: 220px" v-model="updateFormData.wan" placeholder="请选择网口">
              <el-option
                :disabled="updateFormData.lan === item || updateFormData.wan === item"
                v-for="item in updateFormData?.id ? ifaces : idleList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer-more-button></template>
  </base-dialog>
</template>

<style lang="scss" scoped></style>
